<template>
  <div class="musicplay" v-if="musiclist.length != 0">
    <div>
      <audio :src="musicurl" ref="audios" autoplay></audio>
    </div>
    <i class="iconfont icon-bg-previous"></i>
    <i
      class="iconfont icon-zanting"
      v-show="isshow == false"
      @click="isshows"
      style="font-size: 40px"
    ></i>
    <i
      class="iconfont icon-bofang"
      v-show="isshow == true"
      @click="isshows"
      style="font-size: 40px"
    ></i>
    <i class="iconfont icon-bg-next"></i>
    <div class="musicname">
      <img :src="musiclist[0].al.picUrl" alt="" />
    </div>
    <div class="name3">
      <div class="sod">
        <span style="margin-right: 10px; font-weight: bold">{{
          musiclist[0].name
        }}</span
        ><span v-for="(m, index) in musiclist[0].ar" :key="m.id" @click="gosongstwo(m.id)" class="name66"
          >{{ m.name
          }}<span>{{
            index == musiclist[0].ar.length - 1 ? "" : "/"
          }}</span></span
        >
      </div>
    </div>
    <!-- 进度条 -->
    <div class="pre">
      <div @mousedown="gofd" ref="los" style="height: 30px">
        <!-- <el-progress
          :percentage="percentage"
          :color="customColor"
          :stroke-width="9"
          style="float: left; width: 800px"
          :show-text="false"
        ></el-progress> -->
        <div class="dibu"></div>
        <div class="dingbu" ref="jidut"></div>

        <span style="width: 20px; margin-right: -30px">{{
          currtentime | dateFormast
        }}</span>
        <span style="width: 10px; margin-right: -50px">/</span
        ><span style="width: 20px; margin-right: -68px">{{
          timeduration | dateFormast
        }}</span>
      </div>
    </div>
    <div class="laba">
      <span
        class="iconfont icon-yangshengqi"
        v-show="isplay == false"
        @click="play"
      ></span>
      <span
        class="iconfont icon-guanbiyangshengqi"
        v-show="isplay == true"
        @click="play"
        style="font-size: 21px"
      ></span>
    </div>
    <div class="audio" @click="vloum">
      <el-progress
        :percentage="percentages"
        :color="customColor"
        style="float: left; width: 100px"
        :show-text="false"
      ></el-progress>
    </div>
    <div class="min_plg">
      <span class="iconfont icon-bofangliebiao"></span>
      <span class="iconfont icon-geciweidianji"></span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import throttle from "lodash/throttle";
export default {
  data() {
    return {
      isshow: true,
      isplay: false,
      percentage: 0,
      customColor: "skyblue",
      percentages: 0,
      timeduration: 0,
      currtentime: -99,
    };
  },
  watch: {
    currtentime: throttle(function () {
      setTimeout(() => {
        //console.log(this.$refs.audios.currentTime);
        if (this.musiclist.length != 0) {
          this.currtentime = Math.ceil(this.$refs.audios.currentTime);
          this.percentage = (this.currtentime / this.timeduration) * 100;
        }
      }, 1200);
    }, 1000),
    musicurl:function() {
      this.$refs.audios.load();
      this.isshow = false;

      setTimeout(() => {
        //this.$refs.audios.play()
        if (this.musiclist.length != 0) {
          this.currtentime = Math.ceil(this.$refs.audios.currentTime);
          this.percentage = (this.currtentime / this.timeduration) * 100;
          this.timeduration = Math.ceil(this.$refs.audios.duration);
          this.percentages = this.$refs.audios.volume * 100;
        }
      }, 1000);
    },
    percentage() {
      if (this.musiclist.length != 0) {
        this.$refs.jidut.style.width = this.percentage * 8 + "px";
      }
    },
  },
  methods: {
    isshows() {
      this.isshow = !this.isshow;
      //this.timeduration = Math.ceil(this.$refs.audios.duration);
      // console.log(this.$refs.audios.currentTime);
      if (!this.isshow) {
        this.$refs.audios.play();
        setTimeout(() => {
          this.currtentime = Math.ceil(this.$refs.audios.currentTime);
          //console.log( this.currtentime);
        }, 1100);
      } else {
        this.$refs.audios.pause();
      }
    },
    play() {
      this.isplay = !this.isplay;
      if (this.isplay) {
        this.$refs.audios.volume = 0;
      } else {
        this.$refs.audios.volume = 0.5;
      }
    },
    gofd(event) {
      //console.log("sss");

      this.$refs.audios.pause();
      //console.log(event.offsetX);
      //console.log(this.$refs);
      this.percentage = event.offsetX / 8;

      this.$refs.los.onmousemove = (e) => {
        //console.log('333');
        this.percentage = e.offsetX / 8;
      };

      this.$refs.los.onmouseup = (e) => {
        this.$refs.los.onmousemove = null;
        this.$refs.los.onmouseup = null;
        this.$refs.audios.currentTime =
          (this.percentage / 100) * this.$refs.audios.duration;
        this.currtentime = parseInt(this.$refs.audios.currentTime);
        this.$refs.audios.play();
      };
      //console.log( this.$refs.jidut.style.width);
    },
    vloum(e) {
      this.$refs.audios.volume = e.offsetX / 100;
      this.percentages = this.$refs.audios.volume * 100;
    },
    gosongstwo(m){
          this.$router.push({name:'songstwo',params:{id:m}})
    }
  },
  mounted() {
    //console.log(this.$refs.audios.currentTime);

    //  this.$bus.$on("hello", (res) => {
    //       this.$refs.audios.load()
    //  }
    //   this.musicurls = await this.$store.dispatch("getmusic", res);

    //   if (this.musicurls !== '') {
    //     setTimeout(() => {
    //        this.isshow = false;
    //       this.currtentime = parseInt(this.$refs.audios.currentTime);
    //       this.timeduration = parseInt(this.$refs.audios.duration);
    //          this.percentages = this.$refs.audios.volume * 100;
    //       //console.log( this.currtentime);
    //     }, 1500);

    //   }
    // });
   
      //this.$refs.audios.play()

      if (this.musiclist.length != 0) {
        this.currtentime = Math.ceil(this.$refs.audios.currentTime);
        this.percentage = (this.currtentime / this.timeduration) * 100 || 0;
        this.timeduration = Math.ceil(this.$refs.audios.duration);
        this.percentages = this.$refs.audios.volume * 100;
      }
    
  },
  computed: {
    ...mapState({
      musiclist: (state) => {
        return state.second.getmusiclist;
      },
      musicurl: (state) => {
        return state.user.musicurl;
      },
    }),
  },
};
</script>

<style lang='less' scoped >
/deep/.el-progress-bar__inner {
  float: left;
  transition-duration: 0s !important;
}
.musicplay {
  width: 100%;
  height: 60px;
  border-top: 1px solid gray;
  background-color: #fff;
  i {
    float: left;

    font-size: 30px;
    margin: 10px 0px;
    margin-left: 60px;
    cursor: pointer;
    line-height: 40px;
  }
  .name3 {
    span {
      font-size: 14px;
    }
    .sod {
      display: inline-block;

      width: 300px;
      height: 25px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      span {
        font-size: 14px;
        line-height: 30px;
      }
      .name66{
        cursor: pointer;

      }
      .name66:hover{
        color: skyblue;
        text-decoration: underline;
      }
    }
  }
  .pre {
    float: left;
    width: 940px;

    div {
      position: relative;
      float: left;
      width: 800px;
      height: 20px;
      cursor: pointer;
      margin-top: 1px;
      span {
        float: right;
        width: 30px;
        margin-top: -1px;
        text-align: center;
      }
      .dibu {
        position: absolute;
        width: 800px;
        height: 10px;
        background-color: #e1e1e1;
        border-radius: 5px;
        margin-top: 2px;
      }
      .dingbu {
        position: absolute;
        top: 1px;
        width: 0px;
        height: 10px;
        background-color: skyblue;
        border-radius: 5px;
      }
    }
  }

  .musicname {
    float: left;
    width: 200px;
    height: 60px;
    margin-left: 40px;
    img {
      width: 40px;
      height: 40px;
      margin-left: 150px;
      margin-top: 7px;
      border: 1px solid #c3c3c3;
    }
  }
  .laba {
    float: left;
    width: 40px;
    height: 40px;
    // margin-top: 20px;

    span {
      float: left;
      top: 9px;
      cursor: pointer;
      line-height: 10px;
      font-size: 22px;
    }
  }
  .audio {
    float: left;
    width: 100px;
    margin-top: -6px;
    margin-bottom: 12px;
    height: 40px;

    div {
      float: left;
      top: 5px;

      cursor: pointer;
      width: 200px;
      height: 12px;
      margin-top: 5px;
    }
  }
  .min_plg {
    float: left;
    cursor: pointer;
    width: 200px;
    height: 60px;
    span {
      float: left;

      cursor: pointer;
      font-size: 23px;
      margin-right: 30px;
      margin-top: -10px;
      margin-left: 20px;
    }
  }
}
</style>